import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].utils) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
    },
    {
        path: '/society',
        name: 'Society',
        component: () => import('@/views/Society.vue')
    },
    {
        path: '/list',
        name: 'List',
        component: () => import('@/views/List')
    },
    {
        path: '/user',
        name: 'User',
        component: () => import('@/views/User'),
    },
    {
        path: '/manager',
        name: 'manager',
        component: () => import('@/views/Manager')
    },
    {
        path: '/test',
        name: 'test',
        component: () => import('@/views/test')
    },
    {
        path: '/game',
        name: 'game',
        component: () => import('@/views/Game'),
    },
    {
        path: '/Developer',
        name: 'Developer',
        component: () => import('@/views/Developer')
    },
    {
        path: '/News',
        name: 'News',
        component: () => import('@/views/News')
    }
]

const router = new VueRouter({
    routes
})

// # 完整的导航解析流程
// 1. 导航被触发。
// 2. 在失活的组件里调用 beforeRouteLeave 守卫。
// 3. 调用全局的 beforeEach 守卫。
// 4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
// 5. 在路由配置里调用 beforeEnter。
// 6. 解析异步路由组件。
// 7. 在被激活的组件里调用 beforeRouteEnter。
// 8. 调用全局的 beforeResolve 守卫 (2.5+)。
// 9. 导航被确认。
// 10. 调用全局的 afterEach 钩子。
// 11. 触发 DOM 更新。
// 12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

// 全局前置守卫
// router.beforeEach(((to, from, next) => {
//   console.log('before');
//   console.log(to);
//   console.log(from);
//   console.log(next);
// }))

export default router
